<template>
  <div class="container">
    <div class="app-box">
      <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="200px">
        <el-form-item label="代理商logo" prop="imgUrl">
          <div class="box">
            <!-- action="https://jsonplaceholder.typicode.com/posts/" -->
            <el-upload
              class="avatar-uploader"
              :auto-upload="false"
              action="#"
              :file-list="fileList"
              :limit="1"
              :show-file-list="false"
              :on-change="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar">
              <div v-else>
                <i class="el-icon-plus avatar-uploader-icon"></i>
                <!-- <div class="text-upload">点击上传</div> -->
              </div>
            </el-upload>
            <div class="text-tip">（只能上传jpg/png文件，且不超过500kb）</div>
          </div>
          <!-- <el-input v-model="form.imgUrl" placeholder="请输入活动的图片" /> -->
        </el-form-item>
        <el-form-item label="活动类型" prop="type">
          <!-- 活动类型 0/文本  1/H5链接 -->
          <el-select v-model="form.type" placeholder="全部">
           <el-option
              v-for="dict in dict.type.sys_event"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动链接" prop="url" v-if="this.form.type !== '0'" >
          <el-input style="width: 290px;" v-model="form.url" placeholder="请输入活动链接" />
        </el-form-item>
<!--        <el-form-item label="状态 0/正常  1/异常" prop="status">
          <el-select v-model="form.status" placeholder="请选择状态 0/正常  1/异常">
            <el-option
              v-for="dict in dict.type.sys_agent"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="排序" prop="sort" v-if="this.form.type !== '1'" >
          <el-input style="width: 290px;" v-model="form.sort" placeholder="请输入排序" />
        </el-form-item>
        <el-form-item label="活动内容" prop="context" v-if="this.form.type !== '1'" >
          <el-input :rows="7" type="textarea" v-model="form.context" placeholder="请输入活动内容" />
        </el-form-item>
      </el-form>
    </div>
    <div class="app-box">
      <AddFooter @submitForm="submitForm"></AddFooter>
    </div>
  </div>
</template>

<script>
  import { getEventManage, addEventManage, updateEventManage, uploadFile } from "@/api/messages/eventManage";
  import AddFooter from "@/components/AddFooter/index";
  export default {
    name: "addEvent",
    dicts: ['sys_event', 'sys_agent'],
    components: {
      AddFooter
    },
    data() {
      return {
        // 表单参数
        form: {
          imgUrl: null,
        },
        fileList:[],
        // 表单校验
        rules: {
          imgUrl: [
            { required: true, message: "代理商logo不能为空", trigger: "blur" }
          ],
          type: [
            { required: true, message: "活动类型不能为空", trigger: "change" }
          ],
          sort: [
            { required: true, message: "排序不能为空", trigger: "blur" }
          ],
          context: [
            { required: true, message: "活动内容不能为空", trigger: "blur" }
          ],
          url: [
            { required: true, message: "活动链接不能为空", trigger: "blur" }
          ]
        },
      }
    },
    // watch: {
    //   'form.type'(newVal, oldVal) {
    //     console.log('this.form.type---newVal', newVal);
    //   }
    // },
    created() {
      if (this.$route.query.id) {
        this.getInfo();
      } else {
        this.form = {};
      }

    },
    methods: {
      getInfo() {
        getEventManage(this.$route.query.id).then(response => {
          this.form = response.data;
        });
      },
      // 上传图片
      handleAvatarSuccess(res, file) {
       let formData = new FormData();
       formData.append('file', file[0].raw);
        uploadFile(formData).then(res => {
          this.form.imgUrl = res.data;
          this.fileList = [];
        })
      },
      beforeAvatarUpload(file) {
        // const isJPG = file.type === 'image/jpeg';
        const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isLt500kb = file.size / 1024 < 500;

        if (!isJPGorPNG) {
          this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
        }
        if (!isLt500kb) {
          this.$message.error('上传头像图片大小不能超过 500kb!');
        }
        return isJPGorPNG && isLt500kb;
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateEventManage(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
              });
            } else {
              addEventManage(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
              });
            }
            this.$router.push({ path: '/eventManage/index' });
          }
        });
      },
    },
  }
</script>

<style lang="scss" scoped>
.container {
  margin: 20px;
  background-color: #F5F5F6;
}
.el-form {
  width: 660px;
  margin: 0 auto;
}
.box{
  display: flex;
  align-items: center;
  .avatar-uploader {
    width: 90px;
    height: 90px;
    background: #F5F5F6;
    border-radius: 5px;
    border: 1px dashed #B5B5B5;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    .text-upload {
      position: absolute;
    }
    .avatar {
      width: 90px;
      height: 90px;
      object-fit: cover;
      transform: translateY(6px);
      background: #F5F5F6;
      border-radius: 5px;
      border: 1px solid #B5B5B5;
      // width: 178px;
      // height: 178px;
      // display: block;
    }
  }
  .text-tip {
    font-size: 14px;
    color: #999999;
  }
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.content-box {
  padding: 10px;
  width: 660px;
  height: 274px;
  background: #F5F5F6;
  border-radius: 5px;
}
</style>
